<template>
	<view class="holderBox">
		<f-navbar title="信息登记" :iconLeft="true" :isBack="true" @goBack="goBack" />
		<view v-if="!editState"
			class="holderBox-content ff-font-14 ff-bg-fff ff-margin-left-10 ff-margin-right-10 ff-margin-top-15 ff-border-radius-10">
			<view class="ff-align-items-one ff-flex-between ff-padding-15 ff-font-15">
				<view class="ff-font-weight-600">消防控制室持证人员</view>
			</view>
			<view class="ff-align-items-one ff-flex-between ff-padding-15 ff-solid-bottom">
				<view><text class="ff-color-red">*</text>姓名</view>
				<input class="ff-text-right ff-line-height-1-3" placeholder="请输入姓名" placeholder-style="color:#999"
					type="text" v-model.trim="holderParams.staffName" />
			</view>
			<view class="ff-align-items-one ff-flex-between ff-padding-15 ff-solid-bottom">
				<view><text class="ff-color-red">*</text>手机号码</view>
				<input class="ff-text-right ff-line-height-1-3" placeholder="请输入手机号码" placeholder-style="color:#999"
					type="number" maxlength="11" v-model.trim="holderParams.staffPhone" />
			</view>
			<view class="ff-align-items-one ff-flex-between ff-padding-15 ff-solid-bottom">
				<view><text class="ff-color-red">*</text>身份证号</view>
				<input style="width: 360rpx;" type="idcard" class="ff-text-right ff-line-height-1-3"
					placeholder="请输入身份证号" placeholder-style="color:#999" maxlength="18"
					v-model.trim="holderParams.staffIdCard" />
			</view>
			<view>
				<view class="ff-align-items-one ff-flex-between ff-padding-15 ff-solid-bottom">
					<view><text class="ff-color-red">*</text>职业资格证书</view>
					<view class="ff-flex ff-text-right" @click="certificateClick">
						<view class="ff-color-999" v-if="certificateName == ''">请选择职业资格证书</view>
						<view v-else>{{ certificateName }}</view>
						<u-icon color="#2a3c62" name="arrow-right"></u-icon>
					</view>
				</view>
				<!-- 职业资格证书弹框 -->
				<u-select v-model="certificateState" label-name="value" value-name="id" :safe-area-inset-bottom="true"
					@confirm="certificateConfirm" :list="certificateList"></u-select>
			</view>
			<view class="ff-align-items-one ff-flex-between ff-padding-15 ff-solid-bottom">
				<view><text class="ff-color-red">*</text>证书编号</view>
				<input class="ff-text-right ff-line-height-1-3" placeholder="请输入证书编号" placeholder-style="color:#999"
					v-model.trim="holderParams.certificateNumber" />
			</view>
		</view>
		<view v-else
			class="holderBox-content ff-font-14 ff-bg-fff ff-margin-left-10 ff-margin-right-10 ff-margin-top-15 ff-border-radius-10">
			<view class="ff-align-items-one ff-flex-between ff-padding-15 ff-font-15">
				<view class="ff-font-weight-600">消防控制室持证人员</view>
			</view>
			<view class="ff-align-items-one ff-flex-between ff-padding-15 ff-solid-bottom">
				<view>姓名</view>
				<view class="ff-color-999">{{holderParams.staffName}}</view>
			</view>
			<view class="ff-align-items-one ff-flex-between ff-padding-15 ff-solid-bottom">
				<view>手机号码</view>
				<view class="ff-color-999">{{holderParams.staffPhone}}</view>
			</view>
			<view class="ff-align-items-one ff-flex-between ff-padding-15 ff-solid-bottom">
				<view>身份证号</view>
				<view class="ff-color-999">{{holderParams.staffIdCard}}</view>
			</view>
			<view>
				<view class="ff-align-items-one ff-flex-between ff-padding-15 ff-solid-bottom">
					<view>职业资格证书</view>
					<view class="ff-color-999">{{certificateName}}</view>
				</view>
			</view>
			<view class="ff-align-items-one ff-flex-between ff-padding-15 ff-solid-bottom">
				<view>证书编号</view>
				<view class="ff-color-999">{{holderParams.certificateNumber}}</view>
			</view>
		</view>
		<view class="ff-flex-between">
			<view v-if="typeState == 1" class="holderBox-but"><u-button type="primary"
					@click="submitClick">确认添加</u-button>
			</view>
			<view v-else class="holderBox-but ff-flex">
				<view @click="delClick" class="holderBox-but-del">删除</view>
				<view v-if="editState" @click="submitClick(1)" class="holderBox-but-edit">修改</view>
				<view v-if="!editState" @click="submitClick(2)" class="holderBox-but-edit">修改</view>
			</view>
		</view>
		<f-loading ref="loading" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		name: 'holderBox',
		data() {
			return {
				editState: true, // 是否可编辑
				typeState: '', // 新增or修改
				// 职业资格证书类型
				certificateState: '', // 职业资格证书类型单选显/隐
				certificateName: '', // 职业资格证书类型名称
				certificateList: [], // 职业资格证书类型数据
				holderParams: {
					staffName: "", // 员工姓名
					staffPhone: "", // 员工手机号
					staffIdCard: "", // 员工身份证号
					certificateLevel: '', // 资格证书等级
					certificateNumber: "" // 资格证书编号
				},
				holderParamsLength: '',
				detailsId: '', // 详情页id
			};
		},
		onLoad(e) {
			this.typeState = e.type
			if (e.type == 1) {
				this.editState = false
			} else {
				this.editState = true
			}
			if (e?.id) {
				this.detailsId = e.id
				this.getDetailsInfo() // 获取详情数据
			}
			this.getLevelList() // 获取证书列表
		},
		computed: {
			...mapState({
				roleStatus: modules => modules.infoList.roleStatus
			})
		},
		methods: {
			...mapMutations(['setUserInfo']),
			// 返回上一层页面
			goBack() {
				if (JSON.stringify(this.holderParams).length >= this.holderParamsLength) {
					uni.showModal({
						title: '温馨提示',
						content: '退出后, 您填写的内容将不会被保存',
						confirmColor: '#3178FF',
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack({
									delta: 1,
									success: function() {
										let page = getCurrentPages().pop(); //跳转页面成功之后
										if (!page) return;
										page.onLoad(page.options); //如果页面存在，则重新刷新页面
									}
								});
							}
						},
					})
				} else {
					this.$pageJump.reLaunch('/pages/maintenance/company/Company');
				}
			},
			// 获取详情数据
			async getDetailsInfo() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: `/BsCompanyFireControlRoomCert/cert/byId?id=` + this.detailsId
				});
				this.$refs.loading.closeLoading(); // 关闭loading动画
				console.log('获取详情数据------', data);
				if (data.code == 200) {
					this.holderParams = data.data;
					this.holderParamsLength = JSON.stringify(this.holderParams).length; // 初始的数据长度
					this.certificateName = data.data.certificateLevel == 3 ? '三级/高级技能' : data.data.certificateLevel ==
						4 ? '四级/中级技能' : data.data.certificateLevel == 5 ? '五级/初级技能' : '--'
				}
			},
			// 获取证书列表
			async getLevelList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: '/BsCompanyFireControlRoomCert/cert/levelList'
				})
				this.$refs.loading.closeLoading(); // 关闭loading动画
				// console.log('获取证书列表', data)
				if (data.code == 200) {
					this.certificateList = data.data
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
			},
			// 点击打开职业资格证书类型
			certificateClick() {
				this.certificateState = true;
			},
			// 选择职业资格证书类型确认后返回的数据
			certificateConfirm(e) {
				this.holderParams.certificateLevel = e[0].value;
				this.certificateName = e[0].label;
			},
			// 提交信息
			async submitClick(e) {
				if (e == 1) {
					this.editState = false
					return
				}
				if (!this.holderParams.staffName || !this.holderParams.staffPhone || !this.holderParams.staffIdCard ||
					!this.holderParams.certificateLevel || !this.holderParams.certificateNumber) {
					uni.showModal({
						title: '温馨提示',
						content: '请完善全部信息后再试',
						confirmColor: '#3178FF',
						showCancel: false,
						confirmText: '确认',
						success: function(res) {
							if (res.confirm) {}
						},
					})
					return;
				} else {
					if (!this.$check.isMobile(this.holderParams.staffPhone)) {
						this.$refs.uToast.show({
							title: '请输入正确的手机号码',
							type: 'error'
						});
						return;
					}
					if (!this.$check.IDCardCheck(this.holderParams.staffIdCard)) {
						this.$refs.uToast.show({
							title: '请输入正确的身份证号',
							type: 'error'
						});
						return;
					}
					let url
					if (this.typeState == 1) {
						url = '/BsCompanyFireControlRoomCert/cert/add'
					} else {
						url = '/BsCompanyFireControlRoomCert/cert/upd'
					}
					this.$refs.loading.openLoading('提交中···'); // 打开loading动画
					const data = await this.$http.post({
						url: url,
						data: this.holderParams
					})
					this.$refs.loading.closeLoading(); // 关闭loading动画
					// console.log('提交结果', data)
					if (data.code == 200) {
						this.$refs.uToast.show({
							title: data.msg,
							type: 'success'
						});
						setTimeout(() => {
							// 刷新前一个页面 （配合前页面的onShow使用）
							uni.navigateBack({
								delta: 1,
								success: function() {
									let page = getCurrentPages().pop(); //跳转页面成功之后
									if (!page) return;
									page.onLoad(page.options); //如果页面存在，则重新刷新页面
								}
							});
						}, 500);
					} else {
						this.$refs.uToast.show({
							title: data.msg,
							type: 'error'
						});
					}
				}
			},
			// 删除持证人
			async delClick() {
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '确认删除当前人员吗？',
					confirmColor: '#3178FF',
					showCancel: true,
					confirmText: '删除',
					success: function(res) {
						if (res.confirm) {
							that.$refs.loading.openLoading('提交中···'); // 打开loading动画
							that.$http.post({
								url: "/BsCompanyFireControlRoomCert/cert/del?id=" + that.detailsId
							}).then(res => {
								that.$refs.loading.closeLoading(); // 关闭loading动画
								// console.log('删除返回的结果', res)
								if (res.code == 200) {
									that.$refs.uToast.show({
										title: res.msg,
										type: 'success'
									});
									setTimeout(() => {
										// 刷新前一个页面 （配合前页面的onShow使用）
										uni.navigateBack({
											delta: 1,
											success: function() {
												let page = getCurrentPages()
													.pop(); //跳转页面成功之后
												if (!page) return;
												page.onLoad(page
													.options); //如果页面存在，则重新刷新页面
											}
										});
									}, 500);
								} else {
									that.$refs.uToast.show({
										title: res.msg,
										type: 'error'
									});
								}
							})

						}
					},
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.holderBox {
		&-but {
			padding-bottom: env(safe-area-inset-bottom); // 针对iphone xr等系列的刘海底部屏幕做的适配
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #ffffff;
			z-index: 999;

			&-del {
				width: 50%;
				border: 2rpx solid #3178ff;
				background-color: #ffffff;
				color: #3178ff;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 10rpx;
				text-align: center;
			}

			&-edit {
				width: 50%;
				font-size: 30rpx;
				text-align: center;
				border: 2rpx solid #3178ff;
				background: #3178FF;
				color: #fff;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 10rpx;
			}
		}


	}
</style>s